
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>立方体</title>
    <script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
        }
 
        #three_canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<canvas id="three_canvas"></canvas>
<script>
    //https://blog.csdn.net/hb_zhouyj/article/details/78712385
    var renderer, camera, scene, light, object;
    var width, height;
    function initRenderer() {
        width = document.getElementById('three_canvas').clientWidth;
        height = document.getElementById('three_canvas').clientHeight;
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('three_canvas')
        });
        renderer.setSize(width, height);
        renderer.setClearColor(0xFFFFFF, 1.0);
    }
 
    function initCamera() {
        camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
        camera.position.x = 200;
        camera.position.y = 200;
        camera.position.z = 200;
        camera.up.x = 0;
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt({
            x: 0,
            y: 0,
            z: 0
        });
    }
    function initScene() {
        scene = new THREE.Scene();
    }
    function initObject() {
        var geometry = new THREE.CubeGeometry(100, 100, 100);
        object = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
        scene.add(object);
    }
    function render() {
        //requestAnimationFrame(render);
        object.rotation.x += 0.1;
        object.rotation.y += 0.1;
        renderer.render(scene, camera);
    }
    function threeStart() {
        initRenderer();
        initCamera();
        initScene();
        initObject();
        render();
    }
    window.onload = threeStart();
</script>
</body>

